<template>
  <div class="overrun-page linear-gradient">
    <div style="height: 2vh"></div>
    <el-row>
      <el-col :span="12">
        <el-container>
          <el-header>
            <div class="common-div-card header-search">
              <el-form :inline="true" :model="headerSearchFormLeft" class="header-search-form">
                <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="headerSearchFormLeft.startTime"
                    type="datetime"
                    placeholder="开始时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker v-model="headerSearchFormLeft.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
                  <el-button @click="handleReset" size="small">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main>
            <el-col>
              <el-row>
                <div style="width: 100%" class="common-div-card main-table">
                  <el-table
                    :data="tableDataLeft"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                  >
                    <el-table-column type="index" label="序号" width="60" fixed="left" />
                    <el-table-column prop="extId" label="卷号" />
                    <el-table-column prop="width" label="宽度" />
                    <el-table-column prop="thick" label="厚度" />
                    <el-table-column prop="steelGrade" label="钢种" />
                    <el-table-column prop="steelTemSet" label="计算带温" />
                    <el-table-column prop="steelTemReal" label="实际带温" />
                    <el-table-column prop="hitRate" label="准确率" fixed="right" />
                  </el-table>
                </div>
              </el-row>
              <el-row>
                <!-- 分页区域 -->
                <div class="common-div-card pagination">
                  <el-pagination
                    v-model:current-page="pagination.currentPageL"
                    v-model:page-size="pagination.pageSizeL"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.totalL"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                  />
                </div>
              </el-row>
            </el-col>
          </el-main>
          <el-footer>
            <div class="common-div-card footer-chart">
              <graph-pie :data="graphDataLeft"></graph-pie>
            </div>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="12">
        <el-container>
          <el-header>
            <div class="common-div-card header-search">
              <el-form :model="headerSearchFormRight" label-width="auto" class="header-search-form" :inline="true">
                <el-form-item label="钢种">
                  <el-input v-model="headerSearchFormRight.steelGrade" placeholder="请输入钢种" size="small" />
                </el-form-item>
                <el-form-item label="宽度">
                  <el-input v-model="headerSearchFormRight.width" placeholder="请输入宽度" size="small" />
                </el-form-item>
                <el-form-item label="厚度">
                  <el-input v-model="headerSearchFormRight.thick" placeholder="请输入厚度" size="small" />
                </el-form-item>
                <el-form-item style="display: flex; flex-wrap: nowrap; align-items: center">
                  <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
                  <el-button @click="handleReset" size="small">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main>
            <el-col>
              <el-row>
                <div style="width: 100%" class="common-div-card main-table">
                  <el-table
                    :data="tableDataRight"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                  >
                    <el-table-column type="index" label="序号" width="60" fixed="left" />
                    <el-table-column prop="extId" label="卷号" />
                    <el-table-column prop="width" label="宽度" />
                    <el-table-column prop="thick" label="厚度" />
                    <el-table-column prop="steelGrade" label="钢种" />
                    <el-table-column prop="steelTemSet" label="计算带温" />
                    <el-table-column prop="steelTemReal" label="实际带温" />
                    <el-table-column prop="hitRate" label="准确率" fixed="right" />
                  </el-table>
                </div>
              </el-row>
              <el-row>
                <!-- 分页区域 -->
                <div class="common-div-card pagination">
                  <el-pagination
                    v-model:current-page="pagination.currentPageR"
                    v-model:page-size="pagination.pageSizeR"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.totalR"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                  />
                </div>
              </el-row>
            </el-col>
          </el-main>
          <el-footer>
            <div class="common-div-card footer-chart">
              <graph-pie :data="graphDataRight"></graph-pie>
            </div>
          </el-footer>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import GraphPie from './GraphPie.vue';

  interface searchFormLeft {
    startTime: string;
    endTime: string;
  }

  interface searchFormRight {
    steelGrade: string;
    width: string;
    thick: string;
  }

  interface tableData {
    extId: string;
    width: string;
    thick: string;
    steelGrade: string;
    steelTemSet: string; // 计算带温
    steelTemReal: string; // 实际带温
    hitRate: number;
  }

  const headerSearchFormLeft = reactive<searchFormLeft>({
    startTime: '',
    endTime: '',
  });

  const headerSearchFormRight = reactive<searchFormRight>({
    steelGrade: '',
    width: '',
    thick: '',
  });

  const tableDataLeft = ref<tableData[]>([
    { extId: '53H339440000', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: 'DC51D+ZF', hitRate: 0.9, steelTemReal: '950℃', steelTemSet: '960℃' },
    { extId: '53H339440001', width: '0.15-0.25', thick: '0.15-0.25', steelGrade: 'Q235B', hitRate: 0.75, steelTemReal: '920℃', steelTemSet: '930℃' },
    { extId: '53H339440002', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: 'SS400', hitRate: 0.92, steelTemReal: '960℃', steelTemSet: '970℃' },
    { extId: '53H339440000', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: 'DC51D+ZF', hitRate: 0.9, steelTemReal: '950℃', steelTemSet: '960℃' },
    { extId: '53H339440001', width: '0.15-0.25', thick: '0.15-0.25', steelGrade: 'Q235B', hitRate: 0.85, steelTemReal: '920℃', steelTemSet: '930℃' },
    { extId: '53H339440002', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: 'SS400', hitRate: 0.92, steelTemReal: '960℃', steelTemSet: '970℃' },
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.78, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.87, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.91, steelTemReal: '930℃', steelTemSet: '940℃' },
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.88, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.87, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.91, steelTemReal: '930℃', steelTemSet: '940℃' },
  ]);
  const tableDataRight = ref<tableData[]>([
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.88, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.87, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.91, steelTemReal: '930℃', steelTemSet: '940℃' },
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.48, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.67, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.71, steelTemReal: '930℃', steelTemSet: '940℃' },
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.88, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.67, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.91, steelTemReal: '930℃', steelTemSet: '940℃' },
    { extId: '53H339440010', width: '0.1-0.2', thick: '0.1-0.2', steelGrade: '16Mn', hitRate: 0.88, steelTemReal: '910℃', steelTemSet: '920℃' },
    { extId: '53H339440011', width: '0.2-0.3', thick: '0.2-0.3', steelGrade: '20#', hitRate: 0.87, steelTemReal: '900℃', steelTemSet: '910℃' },
    { extId: '53H339440012', width: '0.25-0.35', thick: '0.25-0.35', steelGrade: '35#', hitRate: 0.91, steelTemReal: '930℃', steelTemSet: '940℃' },
  ]);
  const graphDataRight = ref<any>([
    // { name: '90%以上', value: 10 },
    // { name: '80%-89%', value: 20 },
    // { name: '70%-79%', value: 30 },
    // { name: '60%-69%', value: 1 },
    // { name: '60%以下', value: 39 },
  ]);
  const graphDataLeft = ref<any>([
    // { name: '90%以上', value: 39 },
    // { name: '80%-89%', value: 20 },
    // { name: '70%-79%', value: 10 },
    // { name: '60%-69%', value: 1 },
    // { name: '60%以下', value: 30 },
  ]);

  const pagination = reactive({
    currentPageL: 1,
    pageSizeL: 10,
    totalL: 0,
    currentPageR: 1,
    pageSizeR: 10,
    totalR: 0,
  });

  const handleSizeChange = (type: string, val: number) => {
    if (type === 'L') {
      pagination.pageSizeL = val;
    } else {
      pagination.pageSizeR = val;
    }
  };

  const handleCurrentChange = (type: string, val: number) => {
    if (type === 'L') {
      pagination.currentPageL = val;
    } else {
      pagination.currentPageR = val;
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPageL = 1;
    pagination.currentPageR = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    (Object.keys(headerSearchFormLeft) as Array<keyof searchFormLeft>).forEach((key) => {
      headerSearchFormLeft[key] = '';
    });
    (Object.keys(headerSearchFormRight) as Array<keyof searchFormRight>).forEach((key) => {
      headerSearchFormRight[key] = '';
    });
    handleSearch();
  };

  const fetchTableData = async () => {
    fetchTableDataLeft();
    fetchTableDataRight();
    fetchGraphData(tableDataLeft, graphDataLeft);
    fetchGraphData(tableDataRight, graphDataRight);
  };

  const fetchGraphData = (tableData: any, graphData: any) => {
    let overNinety = 0;
    let eightyToEightyNine = 0;
    let seventyToSeventyNine = 0;
    let sixtyToSixtyNine = 0;
    let sixtyToBelow = 0;
    tableData.value.forEach((item: any) => {
      if (item.hitRate >= 0.9) {
        overNinety = overNinety + 1;
      } else if (item.hitRate >= 0.8) {
        eightyToEightyNine = eightyToEightyNine + 1;
      } else if (item.hitRate >= 0.7) {
        seventyToSeventyNine = seventyToSeventyNine + 1;
      } else if (item.hitRate >= 0.6) {
        sixtyToSixtyNine = sixtyToSixtyNine + 1;
      } else {
        sixtyToBelow = sixtyToBelow + 1;
      }
    });
    if (overNinety != 0) {
      graphData.value.push({ name: '90%以上', value: overNinety });
    }
    if (eightyToEightyNine != 0) {
      graphData.value.push({ name: '80%-89%', value: eightyToEightyNine });
    }
    if (seventyToSeventyNine != 0) {
      graphData.value.push({ name: '70%-79%', value: seventyToSeventyNine });
    }
    if (sixtyToSixtyNine != 0) {
      graphData.value.push({ name: '60%-69%', value: sixtyToSixtyNine });
    }
    if (sixtyToBelow != 0) {
      graphData.value.push({ name: '60%以下', value: sixtyToBelow });
    }
  };

  const fetchTableDataLeft = async () => {
    // try {
    //   const res = await reportApi.getTableDataLeft(headerSearchFormLeft, pagination.currentPageL, pagination.pageSizeL);
    //   tableDataLeft.value = res.data.data.records;
    //   pagination.currentPageL = res.data.data.current;
    //   pagination.pageSizeL = res.data.data.size;
    //   pagination.totalL = res.data.data.total;
    // } catch (error) {
    //   ElMessage.error('数据获取失败');
    // }
  };

  const fetchTableDataRight = async () => {
    // try {
    //   const res = await reportApi.getTableDataRight(headerSearchFormRight, pagination.currentPageR, pagination.pageSizeR);
    //   tableDataRight.value = res.data.data.records;
    //   pagination.currentPageR = res.data.data.current;
    //   pagination.pageSizeR = res.data.data.size;
    //   pagination.totalR = res.data.data.total;
    // } catch (error) {
    //   ElMessage.error('数据获取失败');
    // }
  };

  onMounted(() => {
    fetchTableData();
  });

  onUnmounted(() => {});
</script>
<style scoped lang="less">
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;
    background-color: #fff;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .overrun-page {
    width: 99vw;
    height: 100vh;
    background-color: #fff;

    &.linear-gradient {
      background-image: linear-gradient(to top, white, @primary-color) !important;
    }
  }

  .header-search {
    height: 8vh;
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
  }

  .header-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 0 5px;
  }

  .main-table {
    height: 49vh;
    width: 100%;
    padding: 20px;

    .el-table {
      height: calc(49vh - 40px);
    }
  }

  .pagination {
    width: 100%;
    height: 6vh;
    margin-top: 1vh;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }

  .footer-chart {
    height: 30vh;
    width: 100%;
  }

  .chart-container {
    height: 100%;
    width: 100%;
  }
</style>
